<template>
  <section class="basic-layout">
    <template v-if="$route.query.unwrapped!=='true'">
      <a-layout-sider v-if="$store.getTheme('navPosition')!=='top'"
                      v-model="collapsed"
                      :trigger="null"
                      :theme="navTheme"
                      class="basic-layout-sider fix-sider"
                      collapsible>
        <!-- 菜单头部 -->
        <menu-header :collapsed="collapsed" />

        <!-- 菜单 -->
        <slot name="menu" />
        <Menu v-if="!$slots.menu"
              :class="{
                'menu-sider': true,
                'basic-menu-dark': navTheme!=='light',
                'basic-menu-light': navTheme=='light'
              }"
              :collapsed="collapsed"
              :theme="navTheme"
              :menuList="$store.getMenu()"
              @select="handleMenuChange" />
      </a-layout-sider>
    </template>
    <section class="basic-layout-main fixed-layout-main"
             :style="{paddingLeft: computedMainPadding}">
      <template v-if="$route.query.unwrapped!=='true'">
        <a-layout-header></a-layout-header>
        <div v-if="$store.getTheme('navPosition')!=='top'">
          <a-layout-header class="fixed-header"
                           :style="computedMainHeader">
            <!-- 展开折叠菜单图标 -->
            <span class="header-icon sider-collapsed-trigger">
              <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                      @click="toggleCollapsed" />
            </span>

            <!-- 顶部工具栏 -->
            <header-toolbar v-if="$components.HeaderToolbar" />

            <!-- 右边头部 -->
            <div class="header-right">
              <a-space>
                <!-- 用户工具栏 -->
                <user-header-toolbar v-if="$components.UserHeaderToolbar" />
                <!-- 登录用户信息 -->
                <user-info-header :themes="themes"
                                  :fullName="loginUser.userName"
                                  :unitList="unitList"
                                  :avatar="loginUser.avatar"
                                  :agentList="agentList"
                                  @themeSetting="()=>$refs.themeSetting.show()" />
              </a-space>
            </div>

          </a-layout-header>
        </div>

        <a-layout-header v-if="$store.getTheme('navPosition')==='top'"
                         class="fixed-header header-horizontal"
                         :theme="navTheme"
                         style="width: 100%; padding: 0">
          <div :style="{
            'background': navTheme=='light'?'#fff': undefined,
            'height': '100%',
            'padding': '0 20px',
            'display': 'flex'
          }">
            <menu-header />
            <div style="flex: 1; max-width: 1000px;">
              <slot name="menu">
                <Menu v-if="!$slots.menu"
                      :class="{
                        'basic-menu-dark': navTheme!=='light',
                        'basic-menu-light': navTheme=='light'
                      }"
                      :style="{ lineHeight: '64px'}"
                      mode="horizontal"
                      :collapsed="collapsed"
                      :theme="navTheme"
                      :menuList="$store.getMenu()"
                      @select="handleMenuChange" />
              </slot>
            </div>
            <div style="float: right; margin-left: auto">
              <user-info-header :themes="themes"
                                :fullName="loginUser.userName"
                                :unitList="unitList"
                                :avatar="loginUser.avatar"
                                :agentList="agentList"
                                @themeSetting="()=>$refs.themeSetting.show()" />
            </div>
          </div>
        </a-layout-header>
      </template>

      <main class="main"
            :style="{
              'margin': computedContentPadding,
            }">
        <!-- 页面内容展示区布局 -->
        <template>
          <!-- 多标签模式布局组件 -->
          <MultiTabLayout v-if="$store.getTheme('page')=='multi'"
                          ref="layout"
                          :style="{
                            margin: 'auto',
                            'max-width': computedContentWidth
                          }"
                          :reloadRouterView="reloadRouterView" />
          <!-- 单页面模式布局组件 -->
          <SinglePageLayout v-else
                            ref="layout"
                            :style="{
                              margin: 'auto',
                              'max-width': computedContentWidth
                            }"
                            :reloadRouterView="reloadRouterView" />
          <div class="layout-footer">
            <div v-for="(foot, index) in footerList"
                 :key="index">
              {{ foot }}
            </div>
          </div>
        </template>
      </main>

      <!-- 启用主题设置 -->
      <themes-setting v-if="enableThemesSetting"
                      ref="themeSetting" />
    </section>
  </section>
</template>

<script>

import Menu from '../components/Menu'
import MultiTabLayout from './MultiTabLayout.vue'
import SinglePageLayout from './SinglePageLayout.vue'

export default {
  components: { Menu, MultiTabLayout, SinglePageLayout },
  data () {
    return {
      enableThemesSetting: process.env.VUE_APP_ENABLE_THEMES_SETTING === 'true',
      reloadRouterView: false,
      collapsed: false,
      collapsedWidth: '80px',
      loginUser: {},
      unitList: [],
      agentList: [],
      footerList: [],
      // 个性化主题设置
      themes: this.$store.getThemes()
    }
  },
  computed: {
    computedMainHeader () {
      return { width: `calc(100vw - ${this.collapsed ? '80px' : '200px'})` }
    },
    page () {
      return this.$store.getTheme('page')
    },
    navTheme () {
      return this.$store.getTheme('navTheme')
    },
    computedMainPadding () {
      if (this.$route.query.unwrapped === 'true') {
        return undefined
      }
      if (this.$store.getTheme('navPosition') === 'top') {
        return
      }
      return this.collapsed ? '80px' : '200px'
    },
    computedContentPadding () {
      if (this.$route.query.unwrapped === 'true') {
        return undefined
      }
      if (this.$store.getTheme('navPosition') !== 'top') {
        return '24px 16px'
      }
      if (this.$store.getTheme('contentWidth') === 'fixed') {
        return '0px 16px'
      }
      return undefined
    },
    computedTopMenuWidth () {
      if (this.$store.getTheme('navPosition') !== 'top') {
        return undefined
      }
      if (this.$store.getTheme('contentWidth') === 'fluid') {
        return '800px'
      }
      return ''
    },
    computedContentWidth () {
      if (this.$route.query.unwrapped === 'true') {
        return undefined
      }
      if (this.$store.getTheme('navPosition') == 'top' && this.$store.getTheme('contentWidth') == 'fixed') {
        return '1200px'
      }
      return undefined
    }
  },
  watch: {
    page () {
      this.$router.reload()
    }
  },
  created () {
    process.env.VUE_APP_FOOTER && (this.footerList = process.env.VUE_APP_FOOTER.split('\n'))
    this.setLoginUserInfo()
    this.$router.reload = () => {
      this.reloadRouterView = true
      this.$nextTick(() => {
        this.reloadRouterView = false
      })
    }
    if (this.themes?.color) {
      window.less?.modifyVars?.({
        '@primary-color': this.themes.color
      })
    }
  },
  methods: {
    setLoginUserInfo () {
      this.loginUser = this.$store.getLoginUser()
      this.unitList = this.loginUser.depts.map((i) => {
        i.selected = false
        i.name = []
        i.unitName && i.name.push(i.unitName)
        i.deptName && i.name.push(i.deptName)
        i.name = i.name.join(' / ')
        if (this.loginUser.unitUserId === i.unitUserId) {
          i.selected = true
        }
        return i
      })
      if (!this.loginUser.agent && this.loginUser.agents) {
        this.agentList = this.loginUser.agents.map((i) => {
          i.selected = false
          i.name = []
          i.userName && i.name.push(i.userName)
          i.name = i.name.join(' / ')
          if (this.loginUser.id === i.agentId) {
            i.selected = true
          }
          return i
        })
      }
    },
    handleMenuChange (menuItem, menuMap) {
      if (menuItem.meta?.target === 'iframe') {
        this.$refs.layout.openInIframe(menuItem)
      } else {
        this.$refs.layout.closeIframe()
        this.$router.push({
          path: menuItem.path,
          query: menuItem.query
        })
      }
    },
    toggleCollapsed () {
      this.collapsed = !this.collapsed
      this.$emit('collapsed', this.collapsed)
    }
  }
}
</script>

<style lang="less" scoped>
.basic-layout {
  flex-direction: column;
  display: flex;
  background: #f0f2f5;
  box-sizing: border-box;
  flex-direction: row;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
}
.basic-layout-sider {
  z-index: 10;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.basic-layout-main {
  display: flex;
  flex: auto;
  flex-direction: column;
  background: #f0f2f5;
  min-height: 100vh;

  .fixed-header {
    padding: 0px 20px 0px 0px;
    z-index: 9;
    .header-right {
      height: 100%;
      float: right;
    }
  }
  .header-horizontal {
    background: #001529;
  }

  > div:first-child {
    height: 64px;
  }
  > main {
    position: relative;
    min-height: 280px;
    flex: auto;
    > div:first-child {
      background: #fff;
    }
  }
}

.ant-layout-header {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.sider-collapsed-trigger {
  height: 64px;
  line-height: 64px;
  vertical-align: middle;
  padding: 0 22px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all 0.3s, padding 0s;
  transition: all 0.3s, padding 0s;
  > .anticon {
    font-size: var(--font-size-20);
  }
}

::v-deep .ant-layout-sider-children {
  display: flex;
  flex-direction: column;
  > .menu-sider {
    flex: 1;
  }
}

// 固定左侧菜单，滚动区域及滚动条样式
.fix-sider {
  .menu-sider {
    height: calc(100% - 64px);
    overflow: auto;
  }
  .basic-menu-dark::-webkit-scrollbar {
    width: 4px;
  }
  // 滑块 内阴影+圆角
  .basic-menu-dark::-webkit-scrollbar-thumb {
    // 滚动条滑块圆角
    border-radius: 10px;
    // 滚动条滑块背景色
    background: rgba(255, 255, 255, 0.15);
  }
  .basic-menu-dark:hover::-webkit-scrollbar-thumb {
    // 滑块背景色
    background: rgba(255, 255, 255, 0.3);
  }
  // 滚动条轨道 内阴影+圆角
  .basic-menu-dark::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #001529;
  }
  .basic-menu-dark::-webkit-scrollbar-thumb:hover {
    // 滑块背景色
    background: rgba(255, 255, 255, 0.5);
  }
  .basic-menu-light::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  .basic-menu-light:hover::-webkit-scrollbar-thumb {
    // 滑块背景色
    background: rgba(0, 0, 0, 0.247);
  }
  // 滚动条轨道 内阴影+圆角
  .basic-menu-light::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #ffffff;
  }
  // 滑块 内阴影+圆角
  .basic-menu-light::-webkit-scrollbar-thumb {
    // 滚动条滑块圆角
    border-radius: 10px;
    // 滚动条滑块背景色
    background: rgba(255, 255, 255, 0.15);
  }
  .basic-menu-light::-webkit-scrollbar-thumb:hover {
    // 滑块背景色
    background: rgba(255, 255, 255, 0.5);
  }
}

// 固定头部时，头部工具栏样式
.fixed-layout-main {
  .fixed-header {
    position: fixed;
    top: 0px;
  }
}
.layout-footer {
  text-align: center;
}
</style>